<template>
  <div>
    <div class="line"></div>
    <el-menu
      :default-active="activeIndex"
      class="el-menu-demo"
      mode="horizontal"
      @select="handleSelect"
    >
      <el-menu-item index="/"
        ><router-link class="routerlink" to="/">首页</router-link></el-menu-item
      >
      <el-submenu index="2">
        <template slot="title">商品分类</template>
        <el-menu-item index="2-1">选项1</el-menu-item>
        <el-menu-item index="2-2">选项2</el-menu-item>
        <el-menu-item index="2-3">选项3</el-menu-item>
      </el-submenu>
      <el-menu-item index="/personal"
        ><router-link class="routerlink" to="/personal">个人中心</router-link></el-menu-item
      >
      <el-menu-item v-if="getToken === ''">
        <a href="/#/login">您好，点此登录</a></el-menu-item
      >
      <el-menu-item v-else>
        <a>您好，用户：{{ info.name }}</a></el-menu-item
      >
    </el-menu>
  </div>
</template>

<script>
export default {
  props: {
    info: {
      type: Object,
      required: true,
    },
  },
  data() {
    return {
      activeIndex: "/",
    };
  },
  created() {
    this.activeIndex = this.$route.path;
    console.log(this.activeIndex);
  },
  mounted() {
    //   console.log(this.data.info)
  },
  methods: {
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
  },
  computed: {
    getToken() {
      return this.$store.state.token;
    },
  },
};
</script>

<style scoped>
.routerlink {
  text-decoration: none;
}
</style>